/**
 * Created by chenweicheng on 11/4/18.
 */
import React, {Component} from 'react';
import PropTypes from 'prop-types';
import {
    Modal,
    Text,
    TouchableHighlight,
    View,
    StyleSheet,
    BackAndroid, Image, ScrollView, TouchableOpacity
} from 'react-native';

let Dimensions = require('Dimensions');
let SCREEN_WIDTH = Dimensions.get('window').width;//宽
let SCREEN_HEIGHT = Dimensions.get('window').height;//高
import {px2dpH, px2dpW} from "../config/px2dp"

export default class ModalListDialog extends Component {

    // 构造
    constructor(props) {
        super(props);

        this.chooseIndex = 0;
        this.state = {reload: false}
    }

    static propTypes = {
        _dialogContent: PropTypes.string, //内容
        _dialogLeftBtnTitle: PropTypes.string,    //左按键标题
        _dialogRightBtnTitle: PropTypes.string,   //右按键标题
        _dialogLeftBtnAction: PropTypes.func.isRequired,  //左点击方法
        _dialogRightBtnAction: PropTypes.func.isRequired, //右点击方法
        _dialogVisible: PropTypes.bool,       //显示还是隐藏
    }

    static defaultProps = {

        _dialogContent: '是否退出',
        _dialogLeftBtnTitle: '取消',
        _dialogRightBtnTitle: '确定',
        _dialogVisible: false,
    }

    itemOnclick(index) {
        console.log(index)
        this.chooseIndex = index

        this.setState({reload: !this.state.reload})
        this.props.itemClick(index)
    }

    render() {
        // onPress事件直接与父组件传递进来的属性挂接
        return (
            <Modal
                visible={this.props._dialogVisible}
                transparent={true}
                onRequestClose={() => {}} //如果是Android设备 必须有此方法
            >
                <View style={styles.bg}>
                    <View style={styles.dialog}>
                        <View style={styles.dialogContentView}>
                            <ScrollView style={styles.scrollView}>
                                {this.props.list.map((item, i) => (
                                    <ListCmd key={i} onPress={this.itemOnclick.bind(this,i)} item={item}
                                             choosed={this.chooseIndex==i}
                                             needLine={this.props.list.length-1!=i}/>
                                ))}

                            </ScrollView>
                        </View>

                        <View style={styles.dialogBtnView}>
                            <TouchableHighlight style={styles.dialogBtnViewItem}
                                                onPress={this.props._dialogLeftBtnAction}>
                                <Text style={styles.leftButton}>
                                    {this.props._dialogLeftBtnTitle}
                                </Text>
                            </TouchableHighlight>
                            <TouchableHighlight style={styles.dialogBtnViewItem}
                                                onPress={this.props._dialogRightBtnAction}>
                                <Text style={styles.rightButton}>
                                    {this.props._dialogRightBtnTitle}
                                </Text>
                            </TouchableHighlight>
                        </View>

                    </View>
                </View>
            </Modal>
        );
    }
}
const ListCmd = ({choosed, onPress, item, needLine}) =>
    <View style={{height:px2dpH(60)}}>

        <TouchableOpacity style={{flexDirection:'row',alignItems:'center',height:px2dpH(59)}}
                          onPress={onPress.bind(this)}>
            <Image
                style={[{height:px2dpH(32),width:px2dpW(32),resizeMode:Image.resizeMode.contain,marginLeft:px2dpW(20)}]}
                source={choosed?require('../img/select.png'):require('../img/wan_select.png')}/>
            <Text style={{ fontSize: 15,color:'rgb(155,155,155)'}}>{ item.name}</Text>


        </TouchableOpacity>
        {
            needLine ?
                <View
                    style={{height:px2dpH(1),width:px2dpW(265),backgroundColor:'rgb( 189, 189, 189)'}}/>
                :
                null
        }

    </View >
const styles = StyleSheet.create({
    bg: {  //全屏显示 半透明 可以看到之前的控件但是不能操作了
        width: SCREEN_WIDTH,
        height: SCREEN_HEIGHT,
        backgroundColor: 'rgba(52,52,52,0.5)',  //rgba  a0-1  其余都是16进制数
        justifyContent: 'center',
        alignItems: 'center',
    },
    dialog: {
        width: SCREEN_WIDTH * 0.8,
        height: SCREEN_HEIGHT * 0.28,
        backgroundColor: 'white',
        borderRadius: 8,
    },
    dialogTitleView: {
        width: SCREEN_WIDTH * 0.8,
        height: SCREEN_HEIGHT * 0.08,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#EEEEEE',
        borderTopLeftRadius: 8,
        borderTopRightRadius: 8
    },
    dialogTitle: {
        textAlign: 'center',
        fontSize: 18,
        color: '#000000',
    },
    dialogContentView: {
        width: SCREEN_WIDTH * 0.8,
        height: SCREEN_HEIGHT * 0.20,
        justifyContent: 'center',
        alignItems: 'center',
    },
    dialogContent: {
        textAlign: 'center',
        fontSize: 16,
        color: '#4A4A4A',
    },
    dialogBtnView: {
        width: SCREEN_WIDTH * 0.8,
        height: SCREEN_HEIGHT * 0.08,
        flexDirection: 'row',
    },
    dialogBtnViewItem: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#E5F2FF',
        borderBottomLeftRadius: 8,
        borderBottomRightRadius: 8,
    },
    leftButton: {
        fontSize: 18,
        color: '#007AFF',
        borderBottomLeftRadius: 8,
    },
    rightButton: {
        fontSize: 18,
        color: '#007AFF',
        borderBottomRightRadius: 8,
    }
});